<template>
  <div class="page-component">
    <h3 class="page-title">
      项目
      <span class="pull-right">
        <el-button @click="add" type="primary" size="small">新增项目</el-button>
      </span>
    </h3>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="project" label="项目名称"> </el-table-column>
        <el-table-column prop="thumbnail" label="缩略图">
          <template slot-scope="scope">
            <viewer :images="scope.row.thumbnail">
              <img
                :src="item"
                v-for="(item, index) in scope.row.thumbnail"
                :key="index"
                width="40"
                height="40"
                style="margin: 0 5px"
              />
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="skill" label="技术栈"> </el-table-column>
        <el-table-column prop="reward" label="收获"> </el-table-column>
        <el-table-column label="操作" width="130" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleRowClick(scope.row, 'watch')"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              @click="handleRowClick(scope.row, 'edit')"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-popover
              :ref="scope.row.id"
              placement="top"
              width="160"
              style="margin-left: 10px"
            >
              <p>是否删除该数据？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="visibleDelCancel(scope.row.id)"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="visibleDelSubmit(scope.row)"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference" size="mini" type="text"
                >删除</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 增加 s -->
    <el-dialog title="增加" :visible.sync="dialog.addVisible" width="47%">
      <el-form>
        <el-form-item label="项目名称">
          <el-input v-model="form.project"></el-input>
        </el-form-item>
        <el-form-item label="缩略图">
          <div v-if="form.thumbnail">
            <img
              :src="item"
              v-for="(item, index) in form.thumbnail"
              :key="index"
              style="width: 90px; height: 90px; margin: 5px"
            />
          </div>
          <div>
            <el-upload
            class="upload-thumbnail"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="技能">
          <el-input v-model="form.skill"></el-input>
        </el-form-item>
        <el-form-item label="收获">
          <el-input type="textarea" :rows="6" v-model="form.reward"></el-input>
        </el-form-item>
        <el-button type="primary">保存</el-button>
      </el-form>
    </el-dialog>
    <!-- 增加 e -->

    <!-- 编辑 s -->
    <el-dialog
      :title="dialog.type == 'edit' ? '编辑' : '查看'"
      :visible.sync="dialog.editVisible"
      width="47%"
    >
      <!-- :disabled="dialog.type == 'watch'" -->
      <el-form>
        <el-form-item label="项目名称">
          <el-input
            v-model="form.project"
            :disabled="dialog.type == 'watch'"
          ></el-input>
        </el-form-item>

        <el-form-item label="缩略图">
          <div v-if="form.thumbnail">
            <img
              :src="item"
              v-for="(item, index) in form.thumbnail"
              :key="index"
              style="width: 90px; height: 90px; margin: 5px"
            />
          </div>
          <div>
            <el-upload
             class="upload-thumbnail"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="技能">
          <el-input
            v-model="form.skill"
            :disabled="dialog.type == 'watch'"
          ></el-input>
        </el-form-item>
        <el-form-item label="收获">
          <el-input
            type="textarea"
            :rows="6"
            v-model="form.reward"
            :disabled="dialog.type == 'watch'"
          ></el-input>
        </el-form-item>
        <el-button type="primary" v-if="dialog.type == 'edit'">保存</el-button>
      </el-form>
    </el-dialog>
    <!-- 编辑 e -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        editVisible: false,
        addVisible: false,
        deleteVisible: false,
        type: "",
      },
      form: {
        project: "",
        thumbnail: "",
        skill: "",
        reward: "",
      },
      tableData: [
        {
          id: "0",
          project: "2016-05-02",
          thumbnail: [
            "https://img0.baidu.com/it/u=3751093687,4086762045&fm=26&fmt=auto&gp=0.jpg",
            "https://img2.baidu.com/it/u=1610388114,2033611763&fm=26&fmt=auto&gp=0.jpg",
            "https://img2.baidu.com/it/u=2164511641,706007752&fm=26&fmt=auto&gp=0.jpg",
          ],
          skill: "jquery+html+css",
          reward: "收获很多啊上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    handleRowClick(row, action) {
      this.dialog.type = action;
      this.dialog.editVisible = true;
      this.form = row;
    },
    add() {
      this.dialog.addVisible = true;
      this.form = {
        project: "",
        thumbnail: "",
        skill: "",
        reward: "",
      };
    },
    visibleDelCancel(id) {
      // 取消
      this.$refs[id].doClose();
      console.log(id);
    },
    visibleDelSubmit(rowData) {
      // 确定
      this.$refs[rowData.id].doClose();
      console.log(rowData);
      // 下面写 执行删除操作
    },
  },
};
</script>

<style lang="scss" scoped>

</style>